<!--
    ~ Copyright � 2016-2018 European Support Limited
    ~
    ~ Licensed under the Apache License, Version 2.0 (the "License");
    ~ you may not use this file except in compliance with the License.
    ~ You may obtain a copy of the License at
    ~
    ~      http://www.apache.org/licenses/LICENSE-2.0
    ~
    ~ Unless required by applicable law or agreed to in writing, software
    ~ distributed under the License is distributed on an "AS IS" BASIS,
    ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    ~ See the License for the specific language governing permissions and
    ~ limitations under the License.
    -->
    
<div class="interface-operation">
    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>

    <div
        class="top-add-btn add-btn"
        *ngIf="!isListEmpty()"
        [ngClass]="{'disabled': readonly}"
        data-tests-id="add-operation"
        (click)="onEditOperation()">
        {{ 'INTERFACE_ADD_OPERATION' | translate }}
    </div>

    <div class="operation-list">

        <div
            class="empty-list-container"
            *ngIf="isListEmpty() && !isLoading">
            <div
                class="empty-list-add-btn"
                data-tests-id="add-operation"
                [ngClass]="{'disabled': readonly}"
                (click)="onEditOperation()">
                <svg-icon
                    name="plus-circle"
                    mode="primary"
                    size="x_large"
                    [disabled]="readonly">
                </svg-icon>
                <div class="button-text">{{ 'INTERFACE_ADD_OPERATION' | translate }}</div>
            </div>
        </div>

        <div *ngIf="!isListEmpty()">

            <div class="expand-collapse">
                <a
                    class="link"
                    data-tests-id="expand-all"
                    [ngClass]="{'disabled': isAllExpanded()}"
                    (click)="collapseAll(false)">
                    {{ 'INTERFACE_EXPAND_ALL' | translate }}
                </a> |
                <a
                    class="link"
                    data-tests-id="collapse-all"
                    [ngClass]="{'disabled': isAllCollapsed()}"
                    (click)="collapseAll()">
                    {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
                </a>
            </div>

            <div
                class="interface-row"
                *ngFor="let interface of interfaces"
                [attr.data-tests-id]="'interface-' + interface.displayType()">

                <div
                    class="interface-accordion"
                    [attr.data-tests-id]="'interface-' + interface.displayType() + '-toggle'"
                    (click)="interface.toggleCollapse()">
                    <span
                        class="chevron-container"
                        [ngClass]="{'isCollapsed': interface.isCollapsed}">
                        <svg-icon
                            name="caret1-down-o"
                            mode="primary"
                            size="small">
                        </svg-icon>
                    </span>
                    <span class="interface-name">{{interface.displayType()}}</span>
                </div>

                <div
                    class="generic-table"
                    *ngIf="!interface.isCollapsed">
                    <div class="header-row table-row">
                        <span
                            class="cell header-cell field-name header-name">
                            {{ 'INTERFACE_HEADER_NAME' | translate }}
                        </span>
                        <span
                            class="cell header-cell field-description header-description">
                            {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
                        </span>
                        <span
                            class="cell header-cell field-actions header-actions">
                            ●●●
                        </span>
                    </div>

                    <div
                        class="data-row"
                        *ngFor="let operation of interface.operations"
                        [attr.data-tests-id]="'operation-' + operation.name"
                        (click)="onEditOperation(operation)">
                        <span
                            class="cell field-name"
                            [attr.data-tests-id]="'operation-' + operation.name + '-name'">
                            {{operation.name}}
                        </span>
                        <span
                            class="cell field-description"
                            [ngClass]="{'collapsed': operation.isCollapsed}"
                            [attr.data-tests-id]="'operation-' + operation.name + '-description'">
                            {{operation.getDescriptionEllipsis()}}
                            <span
                                class="more-or-less link"
                                (click)="operation.toggleCollapsed($event)"
                                [attr.data-tests-id]="'operation-' + operation.name + '-ellipsis'">
                                {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
                            </span>
                        </span>
                        <span class="cell field-actions">
                            <span
                                class="delete-action"
                                [attr.data-tests-id]="'remove-operation-' + operation.name"
                                (click)="onRemoveOperation($event, operation)">
                                <svg-icon
                                    *ngIf="!readonly"
                                    name="trash-o"
                                    mode="info"
                                    size="small"
                                    [clickable]="true">
                                </svg-icon>
                            </span>
                        </span>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>
